<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>QQ音乐-千万正版音乐海量无损音质</title>
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/iconfont.css">

</head>

<body>
	<header>
		<div class="head wrapper">
			<div class="logo">
				<img src="./img/logo.png">
			</div>
			<div class="nav">
				<ul>
					<li><a>音乐馆</a></li>
					<li><a>我的音乐</a></li>
					<li><a>客户端</a></li>
					<li><a>开放平台</a></li>
					<li><a>vip</a></li>
				</ul>
			</div>
			<div class="search">
				<input type="text" placeholder="搜索音乐.mv.歌单用户">
			<i class="iconfont icon-sousuo"></i>
			</div>

			<div class="pic">
				<img src="./img/pic.jpg" alt="">
			</div>
			<div class="btn">
				<div class="btn_1">开通vip
       <div class="btn_1-item">
				<ul>
					<li>开通绿砖</li>
					<li>开通付费</li>
				</ul>
			 </div>
				</div>
				<div class="btn_2">充值

					<div class="btn_2-item">
						<ul>
							<li>充值</li>
							<li>充值</li>
						</ul>
					 </div>
				</div>

			</div>

		</div>


		<nav class="wrapper">
			<ul>
				<li><a>首页</a></li>
				<li><a>歌手</a></li>
				<li><a>新碟</a></li>
				<li><a>排行榜</a></li>
				<li><a>分类歌单</a></li>
				<li><a>电台</a></li>
				<li><a>MV</a></li>
				<li><a>数字专辑</a></li>
				<li><a>票务</a></li>

			</ul>
		</nav>
	</header>
	<main>
		<section>
			<div class="main wrapper">
				<h1>歌单推荐</h1>
				<div class="nav">
					<ul>
						<li><a>为你推荐</a></li>
						<li><a>网络歌曲</a></li>
						<li><a>KTV热歌</a></li>
						</li>
						<li><a>3-6岁</a></li>
						<li><a>官方歌单</a></li>
						<li><a>情歌</a></li>
					</ul>
				</div>

				<div class="ro-chart">
					<div class="music">
						<div class="img">

							<img src="./img/301.jpg" alt="">
							<div class="mask">

							</div>
						</div>

						<p>英文|提神醒脑，学习效率加速器</p>
						<span>播放量：1680.0万</span>
					</div>
					<div class="music">
						<div class="img">
							<img src="./img/302.jpg" alt="">
							<div class="mask">

							</div>
						</div>
						<p>[治愈纯音]我在花田贩卖日落</p>
						<span>播放量：1680.0万</span>
					</div>
					<div class="music">
						<div class="img">
							<img src="./img/303.jpg" alt="">
							<div class="mask">

							</div>
						</div>
						<p>古风|戏子洛装 曲终人散</p>
						<span>播放量：1680.0万</span>
					</div>
					<div class="music">
						<div class="img">
							<img src="./img/304.jpg" alt="">
							<div class="mask">

							</div>
						</div>
						<p>Pop music | 坠入欧美音海深处</p>
						<span>播放量：1680.0万</span>
					</div>
					<div class="music">
						<div class="img">
							<img src="./img/305.jpg" alt="">
							<div class="mask">

							</div>
						</div>
						<p>Get好心情！年轻人的养颜小秘方</p>
						<span>播放量：1680.0万</span>
					</div>

				</div>
				<div class="dot wrapper">
					<ul>
						<li>
							<div class="dot-1"></div>
						</li>
						<li>
							<div class="dot-1"></div>
						</li>
						<li>
							<div class="dot-1"></div>
						</li>
					</ul>
				</div>

			</div>
		</section>
		<section>
			<div class="main2 wrapper">
				<h1>新歌首发</h1>
				<div class="nav">
					<div class="nav-all">
						<i class="iconfont icon-yinle"></i>
						<span>播放全部</span></div>
					<ul>
						<li><a>最新</a></li>
						<li><a>内地</a></li>
						<li><a>港台</a></li>
						<li><a>欧美</a></li>
						<li><a>韩国</a></li>
						<li><a>日本</a></li>
					</ul>
				</div>

				<div class="music-orderall wrapper">

					<div class="music-order-row1">
						<div class="music-order">
							<div class="img">
								<img src=".//img/300.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>


						</div>
						<div class="music-order">
							<div class="img">
								<img src=".//img/301.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>
						</div>
						<div class="music-order">
							<div class="img">
								<img src=".//img/302.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>
						</div>
					</div>
					<div class="music-order-row2">
						<div class="music-order">
							<div class="img">
								<img src=".//img/303.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>


						</div>
						<div class="music-order">
							<div class="img">
								<img src=".//img/304.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>
						</div>
						<div class="music-order">
							<div class="img">
								<img src=".//img/305.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>
						</div>
					</div>
					<div class="music-order-row3">
						<div class="music-order">
							<div class="img">
								<img src=".//img/306.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>


						</div>
						<div class="music-order">
							<div class="img">
								<img src=".//img/307.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>
						</div>
						<div class="music-order">
							<div class="img">
								<img src=".//img/308.jpg" alt="">
							</div>
							<div class="music-info">
								<a>测试歌曲</a>
								<p>**</p>
							</div>
							<div class="music-time">
								<p>03.53</p>
							</div>
						</div>
					</div>


				</div>
			</div>
			</div>
		</section>
	</main>

	<footer>
		<div class="content wrapper">
			<div class="download">
				<p>下载音乐客户端</p>
				<ul>
					<li>
						<span class="iconfont icon-kehuduan"></span>
						<p>pc版</p>
					</li>
					<li>
						<span class="iconfont icon-mac"></span>
						<p>mac版</p>
					</li>
					<li>
						<span class="iconfont icon-andriod"></span>
						<p>andriod版</p>
					</li>
					<li>
						<span class="iconfont icon-phone-iphone"></span>
						<p>iphone版</p>
					</li>
				</ul>
				<h4>开放平台</h4>
				<ul>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
				</ul>
			</div>
			<div class="special-product">
				<p>特色产品</p>
				<ul>
					<li>
						<span class="iconfont icon-Kge"></span>
						<p>全民k歌</p>
					</li>
					<li>
						<span class="iconfont icon-ziyuanldpi"></span>
						<p>银河音效</p>
					</li>
					<li>
						<span class="iconfont icon-xiewenzhang"></span>
						<p>QPlay</p>
					</li>
					<li>
						<span class="iconfont icon-zhihu"></span>
						<p>Font直播伴侣</p>
					</li>
				</ul>
				<h4>TME集团官网</h4>
				<ul>
					<li>测试网站</li>
				</ul>
			</div>
			<div class="corporate">
				<p>合作链接</p>
				<ul>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
					<li>测试网站</li>
				</ul>
				
			</div>
		</div>
    <div class="product-info wrapper">
			<ul>
				<li>关于腾讯</li>
				<li>About Tencent</li></li>
				<li>服务条款</li>
				<li>用户服务协议</li>
				<li>隐私政策</li>
				<li>权利声明</li>
				<li>广告服务</li></li>
				<li>腾讯招聘</li>
				<li>服务中心</li>
				<li>网站导航</li></li>
			</ul>
			<p>Copyright@1998-2022Tencent.<span> All Rights Reserved</span></p>
			<ul>
				<li>腾讯公司</li>
				<li>版权所有</li>
				<li>营业执照</li>
				<li>网络文化经营许可证</li>
				<li>粤网文[2020]3396-195号</li>
				
			</ul>
		</div>

		
	</footer>

</body>

</html>